<template>
  <div>
    <a-page-header :ghost="false" title="自定义菜单">
      <div class="ele-text-secondary">
        微信自定义菜单的扩展，不用登录微信平台即可修改微信菜单
      </div>
    </a-page-header>
    <div class="wechat-body">
      <a-card :bordered="false">
        <div class="content" style="width: 900px; margin: 0 auto">
          <a-row justify="center" :gutter="24">
            <a-col :span="10">
              <div class="weixin-preview">
                <div class="weixin-hd">
                  <div class="weixin-title">{{ weixinTitle }}</div>
                </div>
                <div class="weixin-bd">
                  <div class="weixin-menu" id="weixin-menu">
                    <div
                      v-for="(btn, i) in menu.button"
                      class="menu-item"
                      :key="i"
                      :class="{
                        current:
                          selectedMenuIndex === i && selectedMenuLevel() === 1
                      }"
                      @click="selectedMenu(i)"
                    >
                      <div class="menu-item-title">
                        <pause-circle-outlined
                          :rotate="90"
                          style="font-size: 10px"
                        />
                        <span>{{ btn.name }}</span>
                      </div>
                      <div
                        class="weixin-sub-menu"
                        v-show="selectedMenuIndex === i"
                      >
                        <div
                          v-for="(sub, i2) in btn.sub_button"
                          class="menu-sub-item"
                          :key="i2"
                          :class="{
                            current:
                              selectedSubMenuIndex === i2 &&
                              selectedMenuLevel() === 2
                          }"
                          @click.stop="selectedSubMenu(i2)"
                        >
                          <div class="menu-item-title">
                            <span>{{ sub.name }}</span>
                          </div>
                        </div>
                        <div
                          v-if="btn.sub_button.length < 5"
                          class="menu-sub-item"
                          @click.stop="addMenu(2)"
                        >
                          <div class="menu-item-title">
                            <plus-outlined />
                          </div>
                        </div>
                        <i class="menu-arrow arrow_out"></i>
                        <i class="menu-arrow arrow_in"></i>
                      </div>
                    </div>
                    <template v-if="menu.button.length < 3">
                      <div class="menu-item" @click="addMenu(1)">
                        <plus-outlined />
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="14">
              <div class="weixin-menu-detail" v-if="selectedMenuLevel() === 1">
                <div
                  class="menu-input-group"
                  style="border-bottom: 2px #e8e8e8 solid"
                >
                  <div class="menu-name">
                    {{ menu.button[selectedMenuIndex].name }}
                  </div>
                  <div class="menu-del" @click="delMenu">删除菜单</div>
                </div>
                <div class="menu-input-group">
                  <div class="menu-label">菜单名称</div>
                  <div class="menu-input">
                    <a-input
                      placeholder="请输入菜单名称"
                      class="menu-input-text"
                      v-model:value="menu.button[selectedMenuIndex].name"
                      @change="
                        checkMenuName(menu.button[selectedMenuIndex].name)
                      "
                    />
                    <p
                      class="menu-tips"
                      style="color: #e15f63"
                      v-show="menuNameBounds"
                      >字数超过上限</p
                    >
                    <p class="menu-tips">字数不超过4个汉字或8个字母</p>
                  </div>
                </div>
                <template
                  v-if="menu.button[selectedMenuIndex].sub_button.length === 0"
                >
                  <div class="menu-input-group">
                    <div class="menu-label">菜单内容</div>
                    <div class="menu-input">
                      <a-select
                        v-model:value="menu.button[selectedMenuIndex].type"
                        name="type"
                        class="menu-input-text"
                      >
                        <a-select-option value="view"
                          >跳转网页(view)</a-select-option
                        >
                        <a-select-option value="media_id"
                          >发送消息(media_id)</a-select-option
                        >
                        <a-select-option value="miniprogram"
                          >打开指定小程序(miniprogram)</a-select-option
                        >
                        <a-select-option value="click"
                          >自定义点击事件(click)</a-select-option
                        >
                        <a-select-option value="scancode_push"
                          >扫码上传消息(scancode_push)</a-select-option
                        >
                        <a-select-option value="scancode_waitmsg"
                          >扫码提示下发(scancode_waitmsg)</a-select-option
                        >
                        <a-select-option value="pic_sysphoto"
                          >系统相机拍照(pic_sysphoto)</a-select-option
                        >
                        <a-select-option value="pic_photo_or_album"
                          >弹出拍照或者相册(pic_photo_or_album)</a-select-option
                        >
                        <a-select-option value="pic_weixin"
                          >弹出微信相册(pic_weixin)</a-select-option
                        >
                        <a-select-option value="location_select"
                          >弹出地理位置选择器(location_select)</a-select-option
                        >
                      </a-select>
                    </div>
                  </div>
                  <a-card
                    class="menu-content"
                    v-if="selectedMenuType() === 1"
                    style="padding: 0"
                  >
                    <div class="menu-input-group">
                      <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                      <div>
                        <div class="menu-label">页面地址</div>
                        <div class="menu-input">
                          <a-input
                            placeholder="请输入页面地址"
                            class="menu-input-text"
                            v-model:value="menu.button[selectedMenuIndex].url"
                          />
                          <p class="menu-tips cursor" @click="selectNewsUrl"
                            >从公众号图文消息中选择</p
                          >
                        </div>
                      </div>
                    </div>
                  </a-card>
                  <div
                    class="menu-msg-content"
                    v-else-if="selectedMenuType() === 2"
                  >
                    <div class="menu-msg-head">
                      <i class="icon_msg_sender"></i>
                      图文消息
                    </div>
                    <div
                      class="menu-msg-panel"
                      v-if="menu.button[selectedMenuIndex].media_id"
                    >
                      <div class="menu-msg-select">
                        <div class="menu-msg-title">
                          <i class="icon_msg_sender"></i>
                          {{ material.title }}
                        </div>
                        <a
                          :href="material.url"
                          target="_blank"
                          class="el-button el-button--mini"
                          >查看</a
                        >
                        <a-button
                          size="small"
                          type="primary"
                          danger
                          @click="delMaterialId"
                          >删除</a-button
                        >
                      </div>
                    </div>
                    <div class="menu-msg-panel" v-else>
                      <div class="menu-msg-select" @click="selectMaterialId">
                        <i class="icon36_common add_gray"></i>
                        <strong>从素材库中选择</strong>
                      </div>
                    </div>
                  </div>
                  <div
                    class="menu-content"
                    v-else-if="selectedMenuType() === 3"
                  >
                    <div class="menu-input-group">
                      <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                      <div class="menu-label">菜单KEY值</div>
                      <div class="menu-input">
                        <a-input
                          placeholder=""
                          class="menu-input-text"
                          v-model:value="menu.button[selectedMenuIndex].key"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="menu-content"
                    v-else-if="selectedMenuType() === 4"
                  >
                    <div class="menu-input-group">
                      <p class="menu-tips"
                        >订阅者点击该子菜单会跳到以下小程序</p
                      >
                      <div class="menu-label">小程序APPID</div>
                      <div class="menu-input">
                        <a-input
                          placeholder="小程序的appid（仅认证公众号可配置）"
                          class="menu-input-text"
                          v-model:value="menu.button[selectedMenuIndex].appid"
                        />
                      </div>
                    </div>
                    <div class="menu-input-group">
                      <div class="menu-label">小程序路径</div>
                      <div class="menu-input">
                        <a-input
                          placeholder="小程序的页面路径 pages/Index/index"
                          class="menu-input-text"
                          v-model="menu.button[selectedMenuIndex].pagepath"
                        />
                      </div>
                    </div>
                    <div class="menu-input-group">
                      <div class="menu-label">备用网页</div>
                      <div class="menu-input">
                        <a-input
                          placeholder=""
                          class="menu-input-text"
                          v-model="menu.button[selectedMenuIndex].url"
                        />
                        <p class="menu-tips">
                          旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。
                        </p>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <!-- 子菜单 -->
              <div class="weixin-menu-detail" v-if="selectedMenuLevel() === 2">
                <div
                  class="menu-input-group"
                  style="border-bottom: 2px #e8e8e8 solid"
                >
                  <div class="menu-name">
                    {{
                      menu.button[selectedMenuIndex].sub_button[
                        selectedSubMenuIndex
                      ].name
                    }}
                  </div>
                  <div class="menu-del" @click="delMenu">删除子菜单</div>
                </div>
                <div class="menu-input-group">
                  <div class="menu-label">子菜单名称</div>
                  <div class="menu-input">
                    <a-input
                      placeholder="请输入子菜单名称"
                      class="menu-input-text"
                      v-model:value="
                        menu.button[selectedMenuIndex].sub_button[
                          selectedSubMenuIndex
                        ].name
                      "
                      @change="
                        checkMenuName(
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].name
                        )
                      "
                    />
                    <p
                      class="menu-tips"
                      style="color: #e15f63"
                      v-show="menuNameBounds"
                    >
                      字数超过上限
                    </p>
                    <p class="menu-tips">字数不超过8个汉字或16个字母</p>
                  </div>
                </div>
                <div class="menu-input-group">
                  <div class="menu-label">子菜单内容</div>
                  <div class="menu-input">
                    <a-select
                      v-model:value="
                        menu.button[selectedMenuIndex].sub_button[
                          selectedSubMenuIndex
                        ].type
                      "
                      name="type"
                      class="menu-input-text"
                    >
                      <a-select-option value="view"
                        >跳转网页(view)</a-select-option
                      >
                      <a-select-option value="media_id"
                        >发送消息(media_id)</a-select-option
                      >
                      <a-select-option value="miniprogram"
                        >打开指定小程序(miniprogram)</a-select-option
                      >
                      <a-select-option value="click"
                        >自定义点击事件(click)</a-select-option
                      >
                      <a-select-option value="scancode_push"
                        >扫码上传消息(scancode_push)</a-select-option
                      >
                      <a-select-option value="scancode_waitmsg"
                        >扫码提示下发(scancode_waitmsg)</a-select-option
                      >
                      <a-select-option value="pic_sysphoto"
                        >系统相机拍照(pic_sysphoto)</a-select-option
                      >
                      <a-select-option value="pic_photo_or_album"
                        >弹出拍照或者相册(pic_photo_or_album)</a-select-option
                      >
                      <a-select-option value="pic_weixin"
                        >弹出微信相册(pic_weixin)</a-select-option
                      >
                      <a-select-option value="location_select"
                        >弹出地理位置选择器(location_select)</a-select-option
                      >
                    </a-select>
                  </div>
                </div>
                <div class="menu-content" v-if="selectedMenuType() === 1">
                  <div class="menu-input-group">
                    <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                    <div class="menu-label">页面地址</div>
                    <div class="menu-input">
                      <a-input
                        placeholder="请输入页面地址"
                        class="menu-input-text"
                        v-model:value="
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].url
                        "
                      />
                      <p class="menu-tips cursor" @click="selectNewsUrl"
                        >从公众号图文消息中选择</p
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="menu-msg-content"
                  v-else-if="selectedMenuType() === 2"
                >
                  <div class="menu-msg-head">
                    <i class="icon_msg_sender"></i>
                    图文消息
                  </div>
                  <div
                    class="menu-msg-panel"
                    v-if="
                      menu.button[selectedMenuIndex].sub_button[
                        selectedSubMenuIndex
                      ].media_id
                    "
                  >
                    <div class="menu-msg-select">
                      <i class="icon_msg_sender"></i>
                      <span>{{ material.title }}</span>
                      <a
                        :href="material.url"
                        target="_blank"
                        class="el-button el-button--mini"
                        >查看</a
                      >
                      <a-button
                        size="small"
                        type="primary"
                        danger
                        @click="delMaterialId"
                        >删除</a-button
                      >
                    </div>
                  </div>
                  <div class="menu-msg-panel" v-else>
                    <div class="menu-msg-select" @click="selectMaterialId">
                      <i class="icon36_common add_gray"></i>
                      <strong>从素材库中选择</strong>
                    </div>
                  </div>
                </div>
                <div class="menu-content" v-else-if="selectedMenuType() === 3">
                  <div class="menu-input-group">
                    <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                    <div class="menu-label">菜单KEY值</div>
                    <div class="menu-input">
                      <a-input
                        placeholder=""
                        class="menu-input-text"
                        v-model:value="
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].key
                        "
                      />
                    </div>
                  </div>
                </div>
                <div class="menu-content" v-else-if="selectedMenuType() === 4">
                  <div class="menu-input-group">
                    <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                    <div class="menu-label">小程序APPID</div>
                    <div class="menu-input">
                      <a-input
                        placeholder="小程序的appid（仅认证公众号可配置）"
                        class="menu-input-text"
                        v-model:value="
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].appid
                        "
                      />
                    </div>
                  </div>
                  <div class="menu-input-group">
                    <div class="menu-label">小程序路径</div>
                    <div class="menu-input">
                      <a-input
                        placeholder="小程序的页面路径 pages/Index/index"
                        class="menu-input-text"
                        v-model:value="
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].pagepath
                        "
                      />
                    </div>
                  </div>
                  <div class="menu-input-group">
                    <div class="menu-label">备用网页</div>
                    <div class="menu-input">
                      <a-input
                        placeholder=""
                        class="menu-input-text"
                        v-model:value="
                          menu.button[selectedMenuIndex].sub_button[
                            selectedSubMenuIndex
                          ].url
                        "
                      />
                      <p class="menu-tips"
                        >旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p
                      >
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>

          <div class="weixin-btn-group">
            <a-button type="primary" @click="onMenuSubmit">发布</a-button>
          </div>
          <a-modal title="选择图文" v-model:visible="newsDialog">
            <a-table :data-source="newsList" size="small" :pagination="{total:newsListTotal,pageSize:10}" :columns="newsTableHeader">
              <template #bodyCell="{ column ,row }">
                <a-button
                  v-if="column.key === 'action'"
                  type="primary" size="small"
                  @click="setNewsUrl(row)"
                  >选择</a-button>
              </template>
            </a-table>
          </a-modal>
          <a-modal title="选择素材" v-model:visible="materialDialog">
            <a-table :data-source="materialList" :columns="materialListColumns">
              <template #bodyCell="{ row }">
                <div
                  v-for="(item, index) in row.content.news_item"
                  :key="index"
                >
                  ({{ index + 1 }}).{{ item.title }}
                </div>
              </template>
              <template #default="{ row }">
                <a-button
                  type="primary"
                  size="small"
                  @click="setMaterialId(row)"
                >选择</a-button
                >
              </template>
            </a-table>
          </a-modal>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, createVNode } from 'vue';
  import { WxMenuForm } from '@/api/wechat/model';
  import {
    addWxMenu,
    getWxMaterial,
    getWxMaterialList,
    getWxMenu
  } from '@/api/wechat';
  import { message, Modal } from 'ant-design-vue';
  import {
    ExclamationCircleOutlined,
    PauseCircleOutlined,
    PlusOutlined
  } from '@ant-design/icons-vue';

  const weixinTitle = ref('公众号');
  const selectedMenuIndex = ref<any>(0); //当前选中菜单索引
  const selectedSubMenuIndex = ref<any>(''); //当前选中子菜单索引
  //当前菜单
  const menu = reactive<WxMenuForm>({
    button: [
      {
        name: '菜单名称',
        type: '',
        url: '',
        sub_button: [{ name: '子菜单名称', type: '', url: '' }]
      }
    ]
  });

  const menuNameBounds = ref<boolean>(false); //菜单长度是否过长
  const material = reactive({
    title: '',
    url: '',
    thumb_url: ''
  });
  const materialLoading = ref<boolean>(false);
  const materialDialog = ref<boolean>(false);
  const materialList = ref([]);
  const materialListOffset = ref(0);
  const materialListTotal = ref(0);
  const newsDialog = ref<boolean>(false);
  const newsList = ref([]);
  const newsListOffset = ref(0);
  const newsListTotal = ref(0);
  const newsTableHeader = [
    {
      title: '图文标题',
      dataIndex: 'content.news_item[0].title'
    },
    {
      title: '日期',
      dataIndex: 'update_time'
    },
    {
      title: '操作',
      key:'action'
    }
  ];
  const materialListColumns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const queryMenu = () => {
    getWxMenu().then((res) => {
      Object.assign(menu.button, res.menu.button);
    });
  };
  //选中主菜单
  const selectedMenu = (i) => {
    selectedSubMenuIndex.value = '';
    selectedMenuIndex.value = i;
    let selectedMenu = menu.button[selectedMenuIndex.value];
    //清空选中media_id 防止再次请求
    if (selectedMenu.media_id && selectedMenuType() == 2) {
      getMaterial(selectedMenu.media_id);
    }
    //检查名称长度
    checkMenuName(selectedMenu.name);
  };
  //选中子菜单
  const selectedSubMenu = (i) => {
    selectedSubMenuIndex.value = i;
    let selectedSubMenu =
      menu.button[selectedMenuIndex.value].sub_button[
        selectedSubMenuIndex.value
      ];
    if (selectedSubMenu.media_id && selectedMenuType() == 2) {
      getMaterial(selectedSubMenu.media_id);
    }
    checkMenuName(selectedSubMenu.name);
  };
  //选中菜单级别
  const selectedMenuLevel = () => {
    if (selectedMenuIndex.value !== '' && selectedSubMenuIndex.value === '') {
      //主菜单
      return 1;
    } else if (
      selectedMenuIndex.value !== '' &&
      selectedSubMenuIndex.value !== ''
    ) {
      //子菜单
      return 2;
    } else {
      //未选中任何菜单
      return 0;
    }
  };
  //获取菜单类型 1. view网页类型，2. media_id类型和view_limited类型 3. click点击类型，4.miniprogram表示小程序类型

  const selectedMenuType = () => {
    if (
      selectedMenuLevel() == 1 &&
      menu.button[selectedMenuIndex.value].sub_button.length == 0
    ) {
      //主菜单
      switch (menu.button[selectedMenuIndex.value].type) {
        case 'view':
          return 1;
        case 'media_id':
          return 2;
        case 'view_limited':
          return 2;
        case 'click':
          return 3;
        case 'scancode_push':
          return 3;
        case 'scancode_waitmsg':
          return 3;
        case 'pic_sysphoto':
          return 3;
        case 'pic_photo_or_album':
          return 3;
        case 'pic_weixin':
          return 3;
        case 'location_select':
          return 3;
        case 'miniprogram':
          return 4;
      }
    } else if (selectedMenuLevel() == 2) {
      //子菜单
      switch (
        menu.button[selectedMenuIndex.value].sub_button[
          selectedSubMenuIndex.value
        ].type
      ) {
        case 'view':
          return 1;
        case 'media_id':
          return 2;
        case 'view_limited':
          return 2;
        case 'click':
          return 3;
        case 'scancode_push':
          return 3;
        case 'scancode_waitmsg':
          return 3;
        case 'pic_sysphoto':
          return 3;
        case 'pic_photo_or_album':
          return 3;
        case 'pic_weixin':
          return 3;
        case 'location_select':
          return 3;
        case 'miniprogram':
          return 4;
      }
    } else {
      return 1;
    }
  };
  //添加菜单
  const addMenu = (level) => {
    if (level == 1 && menu.button.length < 3) {
      menu.button.push({
        type: 'view',
        name: '菜单名称',
        sub_button: [],
        url: ''
      });
      selectedMenuIndex.value = menu.button.length - 1;
      selectedSubMenuIndex.value = '';
    }
    if (
      level == 2 &&
      menu.button[selectedMenuIndex.value].sub_button.length < 5
    ) {
      menu.button[selectedMenuIndex.value].sub_button.push({
        type: 'view',
        name: '子菜单名称',
        url: ''
      });
      selectedSubMenuIndex.value =
        menu.button[selectedMenuIndex.value].sub_button.length - 1;
    }
  };
  //删除菜单
  const delMenu = () => {
    if (selectedMenuLevel() == 1) {
      Modal.confirm({
        title: '警告',
        content: '删除后菜单下设置的内容将被删除',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          if (selectedMenuIndex.value === 0) {
            menu.button.splice(selectedMenuIndex.value, 1);
            selectedMenuIndex.value = 0;
          } else {
            menu.button.splice(selectedMenuIndex.value, 1);
            selectedMenuIndex.value -= 1;
          }
          if (menu.button.length == 0) {
            selectedMenuIndex.value = '';
          }
        },
        onCancel: () => {
          return;
        }
      });
    } else if (selectedMenuLevel() == 2) {
      if (selectedSubMenuIndex.value === 0) {
        menu.button[selectedMenuIndex.value].sub_button.splice(
          selectedSubMenuIndex.value,
          1
        );
        selectedSubMenuIndex.value = 0;
      } else {
        menu.button[selectedMenuIndex.value].sub_button.splice(
          selectedSubMenuIndex.value,
          1
        );
        selectedSubMenuIndex.value -= 1;
      }
      if (menu.button[selectedMenuIndex.value].sub_button.length == 0) {
        selectedSubMenuIndex.value = '';
      }
    }
  };
  //检查菜单名称长度
  const checkMenuName = (val) => {
    if (selectedMenuLevel() == 1 && getMenuNameLen(val) <= 16) {
      menuNameBounds.value = false;
    } else
      menuNameBounds.value = !(
        selectedMenuLevel() == 2 && getMenuNameLen(val) <= 32
      );
  };
  //获取菜单名称长度
  const getMenuNameLen = (val) => {
    let len = 0;
    for (let i = 0; i < val.length; i++) {
      const a = val.charAt(i);
      a.match(/[^\x00-\xff]/gi) != null ? (len += 2) : (len += 1);
    }
    return len;
  };
  //选择公众号素材库素材
  const selectMaterialId = () => {
    materialDialog.value = true;
    getMaterialList();
  };
  //选择公众号图文链接
  const selectNewsUrl = () => {
    newsDialog.value = true;
    getNewsList();
  };
  //设置选择的素材id
  // const setMaterialId = (row) => {
  //   let { media_id, content } = row;
  //   if (selectedMenuLevel() == 1) {
  //     menu.button[selectedMenuIndex.value].media_id = media_id;
  //   } else if (selectedMenuLevel() == 2) {
  //     menu.button[selectedMenuIndex.value].sub_button[
  //       selectedSubMenuIndex.value
  //     ].media_id = media_id;
  //   }
  //   let { news_item } = content;
  //   let item = news_item[0];
  //   material.title = item.title;
  //   material.url = item.url;
  //   materialDialog.value = false;
  // };
  //删除选择的素材id
  const delMaterialId = () => {
    if (selectedMenuLevel() == 1) {
      menu.button[selectedMenuIndex.value].media_id = '';
    } else if (selectedMenuLevel() == 2) {
      menu.button[selectedMenuIndex.value].sub_button[
        selectedSubMenuIndex.value
      ].media_id = '';
    }
  };
  //设置选择的图文链接
  const setNewsUrl = (row) => {
    let { url } = row;
    if (selectedMenuLevel() == 1) {
      menu.button[selectedMenuIndex.value].url = url;
    } else if (selectedMenuLevel() == 2) {
      menu.button[selectedMenuIndex.value].sub_button[
        selectedSubMenuIndex.value
      ].url = url;
    }
    newsDialog.value = false;
  };
  //获取永久素材信息
  const getMaterial = (id) => {
    materialLoading.value = true;
    getWxMaterial(id).then((res) => {
      material.title = res.data.news_item[0].title;
      material.url = res.data.news_item[0].url;
    });
    materialLoading.value = false;
  };
  //获取永久图文列表
  const getNewsList = () => {
    if (
      newsListOffset.value > 0 &&
      newsListOffset.value >= newsListOffset.value
    ) {
      return;
    }
    let params = {
      type: 'news',
      offset: newsListOffset.value,
      count: 10
    };
    getWxMaterialList(params).then((res: any) => {
      newsList.value = newsList.value.concat(res.item);
      newsListOffset.value += res.item_count;
      newsListTotal.value = res.total_count;
    });
  };
  //获取永久素材列表
  const getMaterialList = () => {
    if (
      materialListOffset.value > 0 &&
      materialListOffset.value >= materialListTotal.value
    ) {
      return;
    }
    let params = {
      type: 'image',
      offset: newsListOffset.value,
      count: 10
    };
    getWxMaterialList(params).then((res:any) => {
      console.log(res.item)
      materialList.value = materialList.value.concat(res.item);
      materialListOffset.value += res.item_count;
      materialListTotal.value = res.total_count;
    });
  };
  //提交自定义菜单
  const onMenuSubmit = () => {
    addWxMenu(menu).then((res) => {
      if (res.errcode === 0) {
        message.success('修改成功！');
      } else {
        message.error('修改失败！');
      }
    });
  };
  queryMenu();
</script>

<script lang="ts">
  export default {
    name: 'WeixinMenu'
  };
</script>

<style lang="less" scoped>
  .weixin-preview {
    position: relative;
    width: 320px;
    height: 540px;
    float: left;
    margin-right: 10px;
    border: 1px solid #e7e7eb;
    .weixin-hd {
      color: #fff;
      text-align: center;
      position: relative;
      top: 0;
      left: 0;
      width: 320px;
      height: 64px;
      background: transparent url('@/assets/menu_head.png') no-repeat 0 0;
      .weixin-title {
        color: #fff;
        font-size: 15px;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 33px;
        left: 0;
      }
    }
    .weixin-menu {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 1px solid #e7e7e7;
      background: transparent url('@/assets/menu_foot.png') no-repeat 0 0;
      padding-left: 43px;
      margin-bottom: 0;
      .menu-item {
        position: relative;
        float: left;
        line-height: 50px;
        height: 50px;
        text-align: center;
        width: 33.33%;
        padding: 0;
        border-left: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
        cursor: pointer;
        color: #616161;
        .menu-item-title {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          box-sizing: border-box;
        }
        .current {
          border: 1px solid #44b549;
          background: #fff;
          color: #44b549;
        }
      }
    }
    .weixin-sub-menu {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      border-top: 1px solid #d0d0d0;
      margin-bottom: 0;
      background: #fafafa;
      display: block;
      padding: 0;
      .menu-sub-item {
        line-height: 50px;
        height: 50px;
        text-align: center;
        width: 100%;
        padding: 0;
        border: 1px solid #d0d0d0;
        border-top-width: 0;
        cursor: pointer;
        position: relative;
        color: #616161;
        .menu-item-title {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          box-sizing: border-box;
        }
        .current {
          border: 1px solid #44b549;
          background: #fff;
          color: #44b549;
        }
      }
      .show {
        display: block;
      }
    }
    .menu-arrow {
      position: absolute;
      left: 50%;
      margin-left: -6px;
    }
    .arrow_in {
      bottom: -4px;
      display: inline-block;
      width: 0;
      height: 0;
      border-width: 6px 6px 0;
      border-style: solid dashed dashed;
      border-color: #fafafa transparent transparent;
    }
    .arrow_out {
      bottom: -5px;
      display: inline-block;
      width: 0;
      height: 0;
      border-width: 6px 6px 0;
      border-style: solid dashed dashed;
      border-color: #d0d0d0 transparent transparent;
    }
    a {
      text-decoration: none;
      color: #616161;
    }
  }
  //}

  .weixin-preview .menu-item:hover {
    color: #000;
  }
  .weixin-preview .menu-sub-item:hover {
    background: #eee;
  }

  .weixin-preview li .current:hover {
    background: #fff;
    color: #44b549;
  }

  /*菜单内容*/
  .weixin-menu-detail {
    width: 600px;
    padding: 0 20px 5px;
    background-color: #f4f5f9;
    border: 1px solid #e7e7eb;
    float: left;
    min-height: 540px;
    .menu-name {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
    }
    .menu-del {
      float: right;
      height: 40px;
      line-height: 40px;
      color: #459ae9;
      cursor: pointer;
    }
    .menu-input-group {
      //width: 540px;
      margin: 10px 0 30px 0;
      overflow: hidden;
    }
    .menu-label {
      float: left;
      height: 30px;
      line-height: 30px;
      width: 80px;
      text-align: right;
    }
    .menu-input {
      float: left;
      width: 380px;
      .menu-tips {
        margin: 0 0 0 10px;
      }
    }
    .menu-input-text {
      width: 300px;
      margin-left: 10px;
    }
    .menu-tips {
      color: #8d8d8d;
      padding-top: 4px;
      margin: 0;
    }
    .menu-tips.cursor {
      color: #459ae9;
      cursor: pointer;
    }
    .menu-content {
      padding: 16px 20px;
      border: 1px solid #e7e7eb;
      background-color: #fff;
      .menu-input-group {
        margin: 0 0 10px 0;
      }
      .menu-label {
        text-align: left;
        width: 100px;
      }
      .menu-input-text {
        border: 1px solid #e7e7eb;
      }
      .menu-tips {
        padding-bottom: 10px;
      }
    }
    .menu-msg-content {
      padding: 0;
      border: 1px solid #e7e7eb;
      background-color: #fff;
      .menu-msg-head {
        overflow: hidden;
        border-bottom: 1px solid #e7e7eb;
        line-height: 38px;
        height: 38px;
        padding: 0 20px;
      }
      .menu-msg-panel {
        padding: 30px 50px;
      }
      .menu-msg-select {
        padding: 40px 20px;
        border: 2px dotted #d9dadc;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .menu-msg-select:hover {
        border-color: #b3b3b3;
      }
      strong {
        display: block;
        padding-top: 3px;
        font-weight: 400;
        font-style: normal;
      }
      .menu-msg-title {
        float: left;
        width: 310px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .icon36_common {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
    .add_gray {
      background: url('@/assets/base.png') 0 -2548px no-repeat;
    }
  }
  .icon_msg_sender {
    margin-right: 3px;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    background: url('@/assets/msg_tab.png') 0 -270px no-repeat;
  }

  .weixin-btn-group {
    text-align: center;
    width: 950px;
    margin-top: 30px;
    overflow: hidden;
    .btn {
      width: 100px;
      border-radius: 0;
    }
  }

  #material-list {
    padding: 20px;
    overflow-y: scroll;
    height: 558px;
    table {
      width: 100%;
    }
  }
  #news-list {
    padding: 20px;
    overflow-y: scroll;
    height: 558px;
  }
</style>
